<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/29
  Time: 0:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>实名认证 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/regexp.js" type="text/javascript"></script>
    <script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
    <style type="text/css">
        .content {
            overflow: hidden;
        }

        .userCheckCont {
            width: 100%;
        }

        .userInfoCont {
            overflow: hidden;
            padding: 40px 0px 20px;
            background-image: linear-gradient(to top, #1bb7c3, #f4f4f4);
            box-shadow: 0px 3px 3px #c1c1c1;
        }

        .userInfoCont .userInfoIcon {
            width: 18%;
            margin: 0px auto 10px;
        }

        .userInfoCont .nickName {
            font-size: 14px;
            text-align: center;
            font-weight: bold;
            color: #fff;
        }

        .solidCont {
            width: 200%;
            overflow: hidden;
        }

        .checkState {
            width: 50%;
            margin: 30px 0px;
            float: left;
        }

        .checkState .stateIcon {
            width: 30px;
            margin: 0 auto;
        }

        .checkState .checkStateTxt {
            text-align: center;
            font-size: 14px;
            padding: 5px 0px;
            color: #333333;
            font-weight: bold;
            margin-bottom: 50px;
        }

        .checkState .checkBtn {
            width: 80%;
            line-height: 40px;
            margin: 5px auto;
            font-weight: bold;
            text-align: center;
            color: #20d6da;
            border: 2px solid #20d6da;
            border-radius: 20px;
        }

        .checkState .checkprompt {
            font-size: 14px;
            text-align: center;
            color: #888888;
            margin: 8px 0px 0px;
        }

        .infoCheckEditCont {
            width: 50%;
            float: left;
            padding-top: 20px;
            overflow: auto;
        }

        .submitBtn, .backBtn {
            width: 90%;
            margin: 0 auto 20px;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            color: #20d6da;
            border: 2px solid #20d6da;
            font-weight: bolder;
        }

        #oldPhone {
            display: none;
        }

        /* userIdImg css */
        .userIdImgUpload {
            width: 90%;
            margin: 0 auto 20px;
            overflow: hidden;
        }

        .userIdImgUpload .userIdImgCont {
            width: 100%;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid #e1e1e1;
            background: #fff;
        }

        .userIdImgUpload .userIdImgCont img {
            width: 100%;
            display: block;
            margin: 0 auto;
        }

        .userIdImgUpload .userIdImgCont .userIdImgUploadDesc {
            margin: 0px;
            line-height: 30px;
            font-size: 14px;
            color: #999999;
            font-weight: bold;
            text-align: center;
        }

        .userUploadDesc {
            width: 90%;
            font-size: 14px;
            color: #999999;
            margin: 0 auto 20px;
        }

        .imageCover {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
        }

    </style>
</head>
<body>
<div class="content">

    <input id="timestamp" type="hidden" value="${timestamp}"/>
    <input id="noncestr" type="hidden" value="${nonceStr}"/>
    <input id="signature" type="hidden" value="${signature}"/>
    <input id="appId" type="hidden" value="${appId}"/>

    <div class="userCheckCont">
        <div class="userInfoCont">
            <div class="userInfoIcon">
                <img src="images/userInfoIcon.png" width="100%">
            </div>
            <div class="nickName">用户认证</div>
        </div>
    </div>

    <div class="solidCont">
        <div class="checkState">
            <div class="stateIcon">
                <img src="images/uncheckIcon.png" width="100%">
            </div>
            <div class="checkStateTxt">未认证</div>

            <!-- 按钮组 -->
            <div class="checkBtn userRegBtn">新用户认证</div>
            <div class="checkprompt">认证通过开启信息化校园快递</div>
        </div>

        <div class="infoCheckEditCont" id="newUserReg">
            <form>
                <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
                <input id="wxCode" type="hidden" value="${wxCode}"/>
                <div class="userInputCont">
                    <div class="inputTypeCont">
                        <div class="inputTitle">姓名</div>
                        <input type="text" id="name" class="commonInput" name="name" placeholder="请输入你的姓名...">
                    </div>
                    <div class="inputTypeCont">
                        <div class="inputTitle">手机</div>
                        <input type="text" id="phone" class="commonInput" name="phone" placeholder="请输入你的手机号码...">
                    </div>
                    <div class="inputTypeCont">
                        <div class="inputTitle">密码</div>
                        <input type="text" id="password" class="commonInput" name="password" placeholder="请输入你的密码">
                    </div>
                    <div class="inputTypeCont">
                        <div class="inputTitle">短信</div>
                        <input type="text" id="msg" class="verifiInput" name="msg" placeholder="请输入验证码...">
                        <input type="button" class="verifiBtn" value="发送验证码" onclick="sendMessages()">
                    </div>

                </div>
            </form>
            <div id="userRegSubmitBtn"
                 class="submitBtn userRegSubmitBtn" ${sessionScope.usersname!=null?"onclick=\"submitForm02()\"":"onclick=\"submitForm01()\""}>
                确认提交
            </div>
            <div class="backBtn">点我返回</div>
        </div>
    </div>

    <div class="imageCover">
        <div class="coverCont">
            <img src="images/useridimage.jpg" width="100%">
        </div>
    </div>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="layer/layer.js"></script>
<script src="assets/layui.all.js"></script>
<script type="text/javascript">
    $(function () {
        var pageContextVal = $("#PageContext").val();
        var wxCodeVal = $("#wxCode").val();
        var windowW = $(window).width();
        var windowH = $(window).height();
        if (windowW > 600) {
            windowW = 600;
        }

        var topH = $(".userCheckCont").height();
        $(".solidCont").css({"height": (windowH - topH) + "px"});
        $(".infoCheckEditCont").css({"height": (windowH - topH - 30) + "px"});

        // cover
        var contentH = $(".content").height();
        $(".imageCover").css({"height": contentH + "px"});

        // 样例图片展示  501*377
        var imageH = windowW * 377 / 501;
        $(".coverCont").css({"margin-top": (windowH - imageH) / 2 + "px"});

        $(".imageCover").click(function () {
            $(".imageCover").fadeOut();
        });

        $(".solidCont").css({"margin-left": 0 + "px"});

        $(".userRegBtn").click(function () {
            $(".solidCont").animate({"margin-left": -windowW + "px"}, "fast");
        });

        $(".backBtn").click(function () {
            $(".solidCont").animate({"margin-left": 0 + "px"}, "fast");
        });
    });
</script>
<script>
    function sendMessages() {
        var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
        var count = 60;
        var InterValObj1;
        var curCount1 = count;
        var phone = $.trim($('#phone').val());
        if (!phoneReg.test(phone)) {
            alert(" 请输入有效的手机号码");
            return false;
        }

        $.getJSON("/wx/users/refresh.do", {}, function (data) {
            console.log(data["msgCode"]);
            if (data["msgCode"] == 200) {
                layer.alert("验证码发送成功！");
            } else {
                layer.alert("验证码发送失败！");
            }
        });

    }

    function submitForm01() {
        var name = $("input[name='name']").val();
        var phone = $("input[name='phone']").val();
        var msg = $("input[name='msg']").val();
        var password = $("input[name='password']").val();

        $.post("/wx/couriers/updateInfo.do", {
            name: name,
            phone: phone,
            code: msg,
            password: password
        }, function (data) {
            console.log(data);
            if (200 == data["msgCode"]) {
                layer.alert("更新成功");
                $("#div1").qrcode(config);
                return;
            }
            return;
        })

    }

    function submitForm02() {
        var name = $("input[name='name']").val();
        var phone = $("input[name='phone']").val();
        var msg = $("input[name='msg']").val();
        var password = $("input[name='password']").val();


        $.post("/wx/users/updateInfo.do", {
            name: name,
            phone: phone,
            msg: msg,
            password: password
        }, function (data) {
            console.log(data);
            if (200 == data["msgCode"]) {
                layer.alert("更新成功");
                $("#div1").qrcode(config);
                return;
            }
            return;
        })
    }
</script>
</body>
</html>
